<template>
    <el-form label-position="right">
        <el-form-item label-position="right" label="是否核实到信息:" label-width="160px">
            <el-radio-group size="small" v-model="checkTask.resultType">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="0">不通过</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="快递单号:" label-width="160px" :rules="[{ required: true }]">
            <el-input
                placeholder="请输入快递单号"
                size="small"
                v-model="checkTask.expressNum">
            </el-input>
        </el-form-item>
        <el-form-item label="反馈在线信息:" label-width="160px" :rules="[{ required: true }]">
            <el-upload
                action=""
                :multiple='true'
                :auto-upload="false"
                :show-file-list="false"
                :on-change="uploadFile">
                <el-button size="small">点击上传</el-button>
            </el-upload>
            <div class="uploadFileList" v-if="checkTask.files.length">
                <el-tag size="small" v-for="(item, key) in checkTask.files" :key="key" closable @close="removeFile(item)">{{ item }}</el-tag>
            </div>
        </el-form-item>
        <el-form-item label="备注:" label-width="160px">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入备注信息"
                size="small"
                v-model="checkTask.resultNote">
            </el-input>
        </el-form-item>
        <el-form-item label-width="160px" class="submit-btn">
            <el-button size="small" type="primary" @click="summitCheck">提交</el-button>
        </el-form-item>
    </el-form>
</template>
<script lang="ts">
import { defineComponent, onMounted, toRaw, reactive } from 'vue';
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import { CityChoose, OperatorType } from '@/components'
export default defineComponent({
    name: 'CheckTask',
    components: { CityChoose, OperatorType },
    props: ['taskID'],
    setup(prop, ctx) {
        const store = useStore();
        const taskID = prop.taskID;
        const checkTask = reactive({
            taskID: taskID,
            resultType: '',
            resultNote: '',
            expressNum: '',
            files: []
        });
        const uploadFile = async(file:any) => {
            if (file.size > 100 * 1024 * 1024) {
                ElMessage.warning('上传文件不能超过100M!');
                return;
            }
            const formData = new FormData();
            formData.append('file', file.raw, file.name);
            formData.append('action', 'check');
            const { fileName } = await store.dispatch('fileUpload', formData);
            checkTask.files.push(fileName);
        };
        const removeFile = (name: string) => {
            checkTask.files = checkTask.files.filter(item => item !== name);
        };
        const summitCheck = async() => {
            if (checkTask.resultType === '') {
                ElMessage.warning('请选择审核结果！');
                return;
            }
            await store.dispatch('task/checkTask', checkTask);
            ElMessage.success('审核已提交!');
            ctx.emit('close')
        };
        return {
            checkTask,
            removeFile,
            uploadFile,
            summitCheck,
        }
    }
})
</script>
<style lang="scss" scoped>
.my-release {
    .release-btns {
        @extend %container;
    }
    .release-list {
        @extend %container;
        margin-top: 10px;
    }
    .el-form-item {
        margin-bottom: 10px;
    }
    .choose-company {
        p {
            font-size: 12px;
            color: #b8babd;
        }
    }
    .submit-btn {
        text-align: right;
    }
    .uploadFileList {
        width: 100%;
        float: left;
        .el-tag {
            float: left;
            margin: 5px 8px 0px 0px;
        }
    }
}
</style>